<template>
	<view
		:style="{backgroundImage: 'url(' + data.backgroundImage + ')'}"
		class="teacherDetails"
	>
		<view class="teacherMain">
			
			<!-- 上 -->
			<view class="teacherTop">
				<view class="teacherTopLeft">
					<!-- 第1行 内容-->
					<view class="teacherTopLeftText1">
						<text>{{data.teacherName}}</text>
						<text class="iconfont" style="font-size:34rpx;">&#xe6ea;</text>
						<text>收藏</text>
						<text class="iconfont" style="font-size:30rpx;">&#xe655;</text>&nbsp;
						<text>分享</text>
					</view>
					
					<!-- 第2行 内容-->
					<view class="teacherTopLeftText2">
						<text>行业：</text>
						<text class="teacherTopLeftTextGreen">能源</text>
						<text class="teacherTopLeftTextGreen">交通</text>
					</view>
					
					<!-- 第3行 内容 -->
					<view class="teacherTopLeftText3">
						<text>技能：</text>
						<text class="teacherTopLeftTextOrange">简历</text>
						<text class="teacherTopLeftTextOrange">面试</text>
						<text class="teacherTopLeftTextOrange">职业规划</text>
					</view>
				</view>
				
				<view class="teacherTopRight">
					<view 
						class="teacherTopRightImg" 
						:style="{backgroundImage: 'url(' + data.backgroundImage2 + ')'}"
					>
						<view class="teacherTopRightText">十四年经验</view>
						<view class="teacherTopRightImgCon">
							<image :src="data.teacherImg" mode="aspectFit"></image>
						</view>
					</view>
					<view class="teacherTopRightStar">★★★★★</view>
				</view>
			</view>
			
			<!-- 下 -->
			<view class="teacherBottom">
				<view class="teacherBottomCon">
					<view class="teacherBottomTit">
						<text>讲师介绍</text>
					</view>
					<view class="teacherBottomText">{{data.con1}}</view>
				</view>
				
				<view class="teacherBottomCon">
					<view class="teacherBottomTit">
						<text>擅长课程</text>
					</view>
					<view class="teacherBottomText">{{data.con2}}</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const ipt_content = ref("");
	const data = ref({
		backgroundImage:'/static/teacher/teacherBg.png',
		backgroundImage2:'/static/teacher/teacherBg2.png',
		teacherName:'丁晓豆',
		teacherImg:'/static/teacher/teacher1.png',
		con1:'香港中文大学、滴滴管培生等项目职场发展教练&就业导师\n原知名互联网招聘网站简历优化师\n多家大学就业指导平台签约求职导师，辅导500+应届毕业生&职场新人，完成生涯方向定位，实现职业顺利发展并找到自身优势',
		con2:'擅长领域:\n1.简历优化\n2.面试辅导(尤其擅长汽车、快消&供应链领域)\n3.职业生涯规划咨询(尤其擅长求职定位)\n4.优势辅导'
	})
</script>

<style scoped>
	@import url('../../static/fonts2/iconfont.css');
</style>
<style scoped>
/* 设置背景图的 */
.teacherDetails {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding-bottom: 100rpx;
}
.teacherMain {
	width: 100%;
	padding: 30rpx;
}

/* 上面 */
.teacherTop {
	display: flex;
	width: 100%;
	background-color: rgba(255,255,255,.9);
	border-radius: 26rpx;
	border: 1px solid #fff;
	height: 330rpx;
	margin: 30rpx 0;
	position: relative;
}
/* 上面-左侧 */
.teacherTopLeft {
	width: 65%;
	height: 100%;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
/* 第1行 */
.teacherTopLeftText1 {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}
/* 讲师姓名 */
.teacherTopLeftText1 text:nth-child(1) {
	font-size: 32rpx;
	margin-right: 20rpx;
}
/* 收藏 */
.teacherTopLeftText1 text:nth-child(3) {
	font-size: 26rpx;
	margin-right: 26rpx;
}
/* 分享 */
.teacherTopLeftText1 text:nth-child(5) {
	font-size: 26rpx;
}

/* 第2行 */
.teacherTopLeftText2 {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}
/* 行业-文字 */
.teacherTopLeftText2 text:nth-child(1) {
	color: #848585;
	font-size: 24rpx;
	margin-right: 20rpx;
}
.teacherTopLeftTextGreen {
	padding: 5rpx 15rpx;
	background: #e7f8f0;
	color:#58b997 ;
	margin-right: 15rpx;
	border-radius: 8rpx;
	border: 1px solid #58b997;
	font-size: 22rpx;
}
/* 第3行 */
.teacherTopLeftText3 {
	display: flex;
	align-items: center;
}
/* 技能文字 */
.teacherTopLeftText3 text:nth-child(1) {
	color: #848585;
	font-size: 24rpx;
	margin-right: 20rpx;
}
.teacherTopLeftTextOrange {
	padding: 5rpx 15rpx;
	background: #fff3e9;
	color:#fd8f4c ;
	margin-right: 15rpx;
	border-radius: 8rpx;
	border: 1px solid #fd8f4c;
	font-size: 22rpx;
}

/* 上面-右侧 */
.teacherTopRight {
	display: flex;
	flex-direction: column;
	width: 30%;
	height: 100%;
	position: absolute;
	top:-16rpx;
	right: 32rpx;
}
.teacherTopRightImg {
	width: 100%;
	height: 75%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	padding-top: 15rpx;
	color: #fff;
}
.teacherTopRightText {
	text-align: center;
	padding-top: 10rpx;
	font-size: 24rpx;
}
.teacherTopRightImgCon {
	display: flex;
	justify-content: center;
	padding-top: 20rpx;
}

.teacherTopRightImgCon image {
	width:160rpx;
	height: 160rpx;
	border-radius: 50%;
}

/*  星星*/
.teacherTopRightStar {
	font-size: 40rpx;
	color: #ffc652;
	text-align: center;
	margin-top: 15rpx;
}

/* 下面 */
.teacherBottom {
	width: 100%;
	background-color: rgba(255,255,255,.9);
	border-radius: 26rpx;
	padding: 5rpx 30rpx 0;
}

.teacherBottomCon {
	border-bottom: 1px dashed #ddd;
}
.teacherBottomCon:last-child {
	border-bottom:0;
}
/* 标题部分 */
.teacherBottomTit {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	margin-top: 40rpx;
}
/* 文本部分 */
.teacherBottomText {
	padding-bottom: 40rpx;
	white-space: pre-line;
}

.teacherBottomTit text {
	box-shadow: inset 0 -5px 0 0 #c4ddfb;
	padding-bottom: 3rpx;
}
</style>
